﻿<!docType html>  
<html>  
<head>  
<meta charset="UTF-8">
<style type="text/css">  
.menu_main{
	border:1px solid #669;
	padding:20px;
	width:500px;
	height:40px;
	position:absolute;
	overflow:hidden;
	z-index:10000;
	background-color:#fff;
	-moz-user-select:none;
	-webkit-user-select:none;
}
.menu_main #it1{
	left:10px;
}
.menu_main #it2{
	left:110px;
}
.menu_main #it3{
	left:210px;
}
.menu_main #it4{
	left:310px;
}
.menu_main #it5{
	left:370px;
}
.menu_main #it6{
	left:430px;
}

.menu_main2{
	border:1px solid #669;
	padding:10px;
	width:100px;
	height:290px;
	position:absolute;
	overflow:hidden;
	z-index:10000;
	background-color:#fff;
	-moz-user-select:none;
	-webkit-user-select:none;
}
.menu_main2 #it1{
	top:10px;
}
.menu_main2 #it2{
	top:60px;
}
.menu_main2 #it3{
	top:110px;
}
.menu_main2 #it4{
	top:160px;
}
.menu_main2 #it5{
	top:210px;
}
.menu_main2 #it6{
	top:260px;
}

.menu_item{
	border:1px solid #669;
	margin:0px 5px;
	padding:5px;
	position:absolute;
	top:20px;
	left:10px;
	white-space:nowrap;
	background-color:#fff;
	-moz-user-select:none;
	-webkit-user-select:none;
}
#menu_mini{
	border:1px solid #669;
	width:80px;
	height:20px;
	text-align:center;
	position:absolute;
	padding:5px;
	display:none;
	z-index:10000;
	-moz-user-select:none;
	-webkit-user-select:none;
}
</style>  
</head>  
<body>  

<div id="menu" class="menu_main">
	<a id="it1" class="menu_item">图形菜单1</a>
	<a id="it2" class="menu_item">图形菜单2</a>
	<a id="it3" class="menu_item">文字菜单1</a>
	<a id="it4" class="menu_item">纵向</a>
	<a id="it5" class="menu_item">隐藏</a>
	<a id="it6" class="menu_item">自动隐藏</a>
</div>

<div id="menu_mini">
展开工具
</div>
<div id="lovexin12" style="top:200px;">aaaaaaaaaa</div>
<div style="height:600px;width:400px;">bbbbbbbbbbbbbbbbbbbbbbbbb</div>
<script><!--
    (function () {

        /** 公共代码 ***/
        // IE浏览器的Array对象缺少indexOf方法，加到原型对象上
        if (!Array.indexOf) {
            Array.prototype.indexOf = function (obj) {
                for (var i = 0; i < this.length; i++) {
                    if (this[i] == obj) {
                        return i;
                    }
                }
                return -1;
            }
        }
        // 绑定事件响应
        Object.prototype.on = function (type, callback) {
            if (this.attachEvent) {
                this.attachEvent("on" + type, callback);
            } else if (this.addEventListener) {
                this.addEventListener(type, callback, false);
            }
        }
        // 解除事件响应
        Object.prototype.off = function (type, callback) {
            if (this.attachEvent) {
                this.detachEvent("on" + type, callback);
            } else if (this.addEventListener) {
                this.removeEventListener(type, callback, false);
            }
        }
        //解决IE的Object.prototype的BUG
        if (!document.on) {
            document.on = Object.prototype.on;
            document.off = Object.prototype.off;
        }
        // 简化对象获取方法
        function $(obj) {
            if (typeof obj == "string") {
                obj = document.getElementById(obj);
            }
            //解决IE的Object.prototype的BUG
            if (obj && !obj.on) {
                obj.on = Object.prototype.on;
                obj.off = Object.prototype.off;
            }
            return obj;
        }


        /** menu工具条功能代码 ***/
        //全局变量
        var sortArr = []; //需要排序的元素集合
        var sortPosArr = []; //用于排序的位置集合
        var menuPos = {}; //工具条位置
        var hasMove = false; //如果是移动鼠标的话，就不触发点击事件
        var isFollowMouse = false; //是否开启鼠标跟随
        var menu = $("menu"); //工具条对象
        var autoHideObj = $("it6"); //自动隐藏按钮
        var changeDirectionObj = $("it4"); //"纵向|横向"按钮

        //使得工具条可以拖动和排序
        enDrag(menu);
        //鼠标跟随
        $("it1").on('click', followMouse);
        //横向--纵向
        $("it4").on('click', changeDirection);
        //隐藏
        $("it5").on('click', hide);
        //自动隐藏
        $("it6").on('click', autoHide);
        //展开工具
        $("menu_mini").on('click', show);

        //"自动隐藏"--"始终显示"，效果切换	
        function autoHide(e) {
            if (hasMove) {
                return;
            }
            var text = autoHideObj.innerHTML;
            if (text == "自动隐藏") {
                startAutoHide();
            } else {
                stopAutoHide();
            }
        }

        //开启自动隐藏
        function startAutoHide() {
            autoHideObj.innerHTML = "始终显示";
            updateMenuPos();
            document.on('mousemove', checkHide);
        }

        //停止自动隐藏
        function stopAutoHide() {
            menu.style.display = "block";
            autoHideObj.innerHTML = "自动隐藏";
            document.off('mousemove', checkHide);
        }

        //更新当前工具条坐标位置，用于自动隐藏时显示
        function updateMenuPos() {
            var x1 = menu.offsetLeft;
            var y1 = menu.offsetTop;
            var x2 = menu.offsetWidth + x1;
            var y2 = menu.offsetHeight + y1;
            menuPos = { x1: x1, y1: y1, x2: x2, y2: y2 };
        }

        //"纵向"--"横向"，切换
        function changeDirection(e) {
            if (hasMove) {
                return;
            }
            clearMenuStyle();
            if (changeDirectionObj.innerHTML == "纵向") {
                changeDirectionObj.innerHTML = "横向";
                menu.className = "menu_main2";
            } else {
                changeDirectionObj.innerHTML = "纵向";
                menu.className = "menu_main";
            }
            //style切换后，工具条位置会变，所以需要重新记录工具条位置
            updateMenuPos();
            //style切换后，工具条内部按钮位置会变，所以需要重新记录工具条内部按钮位置
            saveSortArr();
            //停止自动隐藏，否则不指定工具条隐藏在哪里了
            stopAutoHide();
        }

        //清空内联样式，否则切换的style还是被覆盖
        function clearMenuStyle() {
            menu.setAttribute("style", "");
            var aa = menu.childNodes;
            for (var i = 0; i < aa.length; i++) {
                var obj = aa[i];
                if (obj.tagName == "A") {
                    if (obj.style.cssText) {
                        obj.style.cssText = "";
                    } else {
                        obj.setAttribute("style", "");
                    }
                }
            }
        }

        //隐藏工具条
        function hide() {
            if (hasMove) {
                return;
            }
            //不再需要自动隐藏
            stopAutoHide();
            //隐藏
            $("menu").style.display = "none";
            $("menu_mini").style.display = "block";
        }

        //展示工具条
        function show() {
            $("menu_mini").style.display = "none";
            $("menu").style.display = "block";
        }

        //切换: 鼠标跟随
        function followMouse() {
            if (hasMove) {
                return;
            }
            if (!isFollowMouse) {
                isFollowMouse = true;
                document.on('mousemove', followMouse2);
            } else {
                isFollowMouse = false;
                document.off('mousemove', followMouse2);
                //删除动作提示
                var tip = $("menu_tip");
                if (tip) {
                    document.body.removeChild(tip);
                }
            }
        }

        //鼠标跟随
        function followMouse2(e) {
            var e = e || window.event;
            var x = e.clientX;
            var y = e.clientY;
            var tip = $("menu_tip");
            if (!tip) {
                tip = document.createElement("span");
                tip.setAttribute("id", "menu_tip");
                tip.style.position = "absolute";
                tip.style.zIndex = 10001;
                document.body.appendChild(tip);
            }
            tip.innerHTML = "鼠标位置: " + x + ", " + y;
            tip.style.left = x + 20 + "px";
            tip.style.top = y + "px";
        }

        //检查鼠标是否在隐藏的工具条位置，是的话就显示工具条
        function checkHide(event) {
            var event = event || window.event;
            var mouseX = event.clientX;
            var mouseY = event.clientY;
            if (mouseX >= menuPos.x1 && mouseX <= menuPos.x2 && mouseY >= menuPos.y1 && mouseY <= menuPos.y2) {
                menu.style.display = "block";
            } else {
                menu.style.display = "none";
            }
        }

        //使得工具条以及其子节点可以拖动
        function enDrag(obj) {
            obj.on('mousedown', dragHandle);
            //IE禁止选中文字
            if (document.attachEvent) {
                obj.onselectstart = function () { return false; }
            }
            var aa = obj.childNodes;
            for (var i = 0; i < aa.length; i++) {
                var a = aa[i];
                if (a.tagName == "A") {
                    $(a).on('mousedown', dragHandle);
                    //IE禁止选中文字
                    if (document.attachEvent) {
                        a.onselectstart = function () { return false; }
                    }
                }
            }
            saveSortArr();
        }

        //保存工具条的各个子元素的位置，用于拖动排序
        function saveSortArr() {
            sortArr = [];
            sortPosArr = [];
            var aa = menu.childNodes;
            for (var i = 0; i < aa.length; i++) {
                var obj = aa[i];
                if (obj.tagName == "A") {
                    var style = obj.currentStyle ? obj.currentStyle : window.getComputedStyle(obj, null);
                    var left = style.left.replace("px", "");
                    var top = style.top.replace("px", "");
                    left = parseInt(left);
                    top = parseInt(top);
                    sortArr.push(obj);
                    sortPosArr.push({ left: left, top: top });
                }
            }
            for (var i = 0; i < sortPosArr.length; i++) {
                var a = sortPosArr[i];
            }
        }

        //横向时，检查当前节点和其他兄弟节点的位置，如果需要就重新排序
        function checkXSort(obj) {
            var idx = sortArr.indexOf(obj);
            if (idx >= 0) {
                for (var i = 0; i < sortArr.length; i++) {
                    if (i < idx) {
                        //如果排队在目标节点前的兄弟节点位置还落后于目标节点，说明需要交换位置
                        if (sortArr[i].offsetLeft > sortArr[idx].offsetLeft) {
                            //如果交换节点宽度有差别，交换的位置需要调整
                            var widthDiff = sortArr[idx].offsetWidth - sortArr[i].offsetWidth;
                            sortPosArr[idx].left += widthDiff;
                            sortArr[i].style.left = sortPosArr[idx].left + "px";
                            //交换节点位置
                            var tmp = sortArr[i];
                            sortArr[i] = sortArr[idx];
                            sortArr[idx] = tmp;
                        }
                    }
                    if (i > idx) {
                        if (sortArr[i].offsetLeft < sortArr[idx].offsetLeft) {
                            var widthDiff = sortArr[idx].offsetWidth - sortArr[i].offsetWidth;
                            sortPosArr[i].left -= widthDiff;
                            sortArr[i].style.left = sortPosArr[idx].left + "px";
                            var tmp = sortArr[i];
                            sortArr[i] = sortArr[idx];
                            sortArr[idx] = tmp;
                        }
                    }
                }
            }
        }


        //纵向时，检查当前节点和其他兄弟节点的位置，如果需要就重新排序
        function checkYSort(obj) {
            var idx = sortArr.indexOf(obj);
            if (idx >= 0) {
                for (var i = 0; i < sortArr.length; i++) {
                    if (i < idx) {
                        if (sortArr[i].offsetTop > sortArr[idx].offsetTop) {
                            var heightDiff = sortArr[idx].offsetHeight - sortArr[i].offsetHeight;
                            sortPosArr[idx].top += heightDiff;
                            sortArr[i].style.top = sortPosArr[idx].top + "px";
                            var tmp = sortArr[i];
                            sortArr[i] = sortArr[idx];
                            sortArr[idx] = tmp;
                        }
                    }
                    if (i > idx) {
                        if (sortArr[i].offsetTop < sortArr[idx].offsetTop) {
                            var heightDiff = sortArr[idx].offsetHeight - sortArr[i].offsetHeight;
                            sortPosArr[i].top -= heightDiff;
                            sortArr[i].style.top = sortPosArr[idx].top + "px";
                            var tmp = sortArr[i];
                            sortArr[i] = sortArr[idx];
                            sortArr[idx] = tmp;
                        }
                    }
                }
            }
        }

        //拖动事件处理
        function dragHandle(event) {
            var event = event || window.event;
            var drag = event.srcElement ? event.srcElement : event.target;
            var startX = drag.offsetLeft;
            var startY = drag.offsetTop;
            var mouseX = event.clientX;
            var mouseY = event.clientY;
            var deltaX = mouseX - startX;
            var deltaY = mouseY - startY;
            drag.style.zIndex = 2;
            //IE需要目标跟随
            if (document.attachEvent) {
                //移动事件是绑定在目标元素上！
                $(drag).on('mousemove', moveHandle);
                $(drag).on('mouseup', upHandle);
                drag.attachEvent('onlosecapture', upHandle);
                drag.setCapture();
            } else {
                //移动事件是绑定在document元素上！
                document.on('mousemove', moveHandle);
                document.on('mouseup', upHandle);
            }
            if (event.stopPropagation) {
                event.stopPropagation();
            }
            //mousedown事件清空鼠标移动记录
            hasMove = false;
            //鼠标移动
            function moveHandle(event) {
                var event = event || window.event;
                drag.style.left = (event.clientX - deltaX) + "px";
                drag.style.top = (event.clientY - deltaY) + "px";
                //元素位置有变化，检查是否需要重新排序
                if (changeDirectionObj.innerHTML == "纵向") {
                    checkXSort(drag);
                } else {
                    checkYSort(drag);
                }
                //更新工具条位置记录
                updateMenuPos();
                //记录鼠标移动，防止拖动事件和点击事件重复
                hasMove = true;
            }
            //鼠标弹起
            function upHandle() {
                drag.style.zIndex = 1;
                //IE需要目标跟随

                if (document.attachEvent) {
                    $(drag).off('mousemove', moveHandle);
                    $(drag).off('mouseup', upHandle);
                    drag.detachEvent('onlosecapture', upHandle);
                    drag.releaseCapture();
                } else {
                    document.off('mousemove', moveHandle);
                    document.off('mouseup', upHandle);
                }
                //拖动后放下元素时，需要调整到固定位置
                var idx = sortArr.indexOf(drag);
                if (idx >= 0) {
                    sortArr[idx].style.left = sortPosArr[idx].left + "px";
                    sortArr[idx].style.top = sortPosArr[idx].top + "px";
                }
            }
        }
    })();

    lastScrollY = 0;
    var heartBeat = function () {
        var diffY;
        if (document.documentElement && document.documentElement.scrollTop)
            diffY = document.documentElement.scrollTop;
        else if (document.body)
            diffY = document.body.scrollTop
        else
        { /*Netscape stuff*/ }
        percent = .1 * (diffY - lastScrollY);
        if (percent > 0)
            percent = Math.ceil(percent);
        else
            percent = Math.floor(percent);

        lastScrollY = lastScrollY + percent;
        var tmp = parseInt(document.getElementById("lovexin12").style.top) + percent;
        return tmp;
    }
    window.setInterval(heartBeat, 5);


    //悬浮功能
    var advInitTop = 0;
    function move() {
        var ele = document.getElementById("ad");

        ele.style.left= (document.documentElement.scrollLeft + advInitTop) + "px";
        ele.style.top= (document.documentElement.scrollTop + advInitTop)+"px";
        window.status = document.documentElement.scrollTop + "/" + document.getElementById("ad").style.pixelTop;
    }
//    window.onscroll = move;
//    window.onresize = move;


    
//class Ele
function Ele(ele){
    var _ = this;
    _.ele = ele;
    _.initTop = document.documentElement.scrollTop;
    _.isOn = false;
    this.floatAtFront = function () {
        //if (_.isOn == false) return;
        try {
            _.ele.style.position = 'absolute';
            _.ele.style.zIndex = '9';
            _.ele.style.left = document.documentElement.scrollLeft + "px";
            _.ele.style.top = document.documentElement.scrollTop + "px";

            //计算顶部位置值
            var winH;
            if (window.innerHeight) { // all except IE
                winH = window.innerHeight;
            } else if (document.documentElement && document.documentElement.clientHeight) {
                // IE 6 Strict Mode
                winH = document.documentElement.clientHeight;
            } else if (document.body) { // other
                winH = document.body.clientHeight;
            }
            var top = parseInt(parseInt(winH * 0.25) + (document.body.scrollTop || document.documentElement.scrollTop));
            _.ele.style.position = "absolute";     //设为绝对定位
            //计算左边位置
            var left = Math.ceil(((Math.min(document.body.scrollWidth, window.screen.availWidth)) - parseInt(_.ele.style.width.replace('px', ''))) / 2) + document.body.scrollLeft;
            _.ele.style.zIndex = "9";    //Z轴位置
            _.ele.style.top = top + "px";  //设置顶部边距
            if (!_.parentNode) {
                document.body.appendChild(_.ele);
            }
            //放在"document.body.appendChild(ele);"后，这样ele.clientWidth才有具体的值.
            var left = Math.ceil(((Math.min(document.body.scrollWidth, window.screen.availWidth)) - _.ele.clientWidth) / 2) + document.body.scrollLeft;
            _.ele.style.left = left + "px";    //设置左边距
            var top;
            if (document.documentElement.scrollTop > document.body.scrollTop ) {
                top = document.documentElement.scrollTop;
            }else{
                top = document.body.scrollTop;
            }
            _.ele.style.top = (top + _.initTop || 1) + "px";
            window.onscroll = _.floatAtFront;
            window.onresize = _.floatAtFront;
        } catch (ex) {
            alert(ex.toString());
        }
    };
}

    //--</script>  
    <div id="ad" style="position:absolute;">hello world</div>
    <script>
        var a = new Ele(document.getElementById("ad"));
        a.floatAtFront();
    
    </script>
</body>  
</html>  